<template>
	<view class="body">
		<u-navbar :is-back="false" title="" :background="background">
			<view class="slot-wrap">
				<image src="../../static/uview/common/icon.png" class="indexlogo"></image>
				<view class="projectName">
					寺庙名称
				</view>
				<view class="exmple">
					互联网宗教信息服务许可证
					<br>
					川（2023）0000000
				</view>
			</view>
		</u-navbar>
		<view class="index-swiper">
			<u-swiper :list="swiperList" height="300"></u-swiper>
		</view>
		<view class="navList">
			<view class="introduce" @click="gotoPage('/pages/templeDetails/templeDetails')">
				<image src="../../static/uview/common/1.png" class="navImg">
				</image>
				<view class="navtext">
					寺院介绍
				</view>
			</view>
			<view class="introduce" @click="gotoPage('/pages/monkDetails/monkDetails')">
				<image src="../../static/uview/common/2.png" class="navImg">
				</image>
				<view class="navtext">
					法师介绍
				</view>
			</view>
		</view>
		<view class="personList-title">
			行善积福
		</view>
		<view class="personList-container">
			<view class="personItem" v-for="(item, index) in personList" :key="index" v-if="item.is_sj === '1'"
				@click="gotoPage('/pages/supportingMaster/supportingMaster', item)">
				<u-image width="250rpx" height="180rpx" :src="item.thumbnail_url"></u-image>
				<view class="text-intro">
					<view class="" style="font-size: 18px;margin-bottom: 5rpx;">
						{{ item.title }}
					</view>
					<view class="" style="margin-bottom: 5rpx;">
						{{ item.subtitle }}
					</view>
					<view class="">
						<u-icon name="heart-fill" style="color: red;margin-right: 10rpx;"></u-icon>
						{{ item.suixi_times }} 份随喜
					</view>
				</view>
			</view>

		</view>
		<view class="copyright">
			copyright©2023 xxxxx 川ICP备1000000号
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			personList: [1, 2, 3, 4, 5, 6, 7],
			imgSrc: 'https://cdn.uviewui.com/uview/example/fade.jpg',
			background: {
				backgroundColor: '#BE9567',
			},
			swiperList: [],
		}
	},
	onLoad() {
		//初始化获得轮播图
		this.getSwiper()
		//初始化获得供养师父列表
		this.getSupportingMasterList()
		/**
		 * 示例中为每个tabbar页面都写了一遍tabbar变量，您可以将tabbar数组写入到vuex中，这样可以全局引用
		 */
	},
	methods: {
		//获取轮播图
		getSwiper() {
			//请求接口获取轮播图
			uni.request({
				url: this.$url + '/api/setting.Carousel/list?page=1&limit=100',
				success: (res) => {
					res.data.data.list.forEach(item => {
						this.swiperList.push({ image: item.file_url, title: item.title })
					});
				}
			})
		},
		getSupportingMasterList() {
			//获取供养师父列表
			uni.request({
				url: this.$url + '/api/shimiao/item/list?ApiToken=&pageIndex=1&pageSize=200',
				success: (res) => {
					console.log('%c [ res ]-102', 'font-size:13px; background:pink; color:#bf2c9f;', res)
					this.personList = res.data.data.data
				}
			})
		},

		gotoPage(url, item) {
			if (item) {
				let send = JSON.stringify(item)
				uni.navigateTo({
					url: url + '?send=' + send
				})
			} else {
				uni.navigateTo({
					url: url
				})
			}
		}
	}

}
</script>

<style lang="scss" scoped>
.copyright {
	position: fixed;
	width: 100%;
	bottom: 0;
	background-color: #FBF5EA;
	display: flex;
	height: 84rpx;
	padding-left: 20rpx;
	align-items: center;
	color: #AC7631;
	font-size: 14px;
	border-top: 1rpx solid #C7C7C7;
}

.personList-container {
	min-height: 70vh;
	background-color: #FFFAF0;

	.personItem {
		display: flex;
		// background-color: rgba(255, 0, 0, 0.5);
		/* 设置背景图片 */
		background-image: url('../../static/WechatIMG12418.png');
		background-size: 94px 75px;
		background-repeat: no-repeat;
		background-position: 295px 39px;
		align-items: center;
		padding: 10px 10px;
		border-top: 1rpx solid #C7C7C7;

		.text-intro {
			margin-left: 10px;
		}
	}
}

.personList-title {
	background-color: #FBF5EA;
	display: flex;
	height: 42px;
	padding-left: 10px;
	align-items: center;
	color: #AC7631;
	font-size: 20px;
	border-top: 1rpx solid #C7C7C7;
}

.navList {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #FBF5EA;
	padding: 10px 10px;
	border-top: 1rpx solid #C7C7C7;

	.introduce {
		.navtext {
			font-size: 18px;
			margin-left: 10px;
			color: #AC7631;
		}

		width: 162px;
		height: 55px;
		border-radius: 10px;
		background-color: #FFEAC4;

		border: 1px solid #BE9567;
		display: flex;
		align-items: center;
		justify-content: center;

		.navImg {
			width: 28px;
			height: 40px;
		}
	}
}

.slot-wrap {
	// padding: 15px 10px 10px 10px;
	display: flex;
	color: #fff;
	align-items: center;
}

.indexlogo {
	width: 30px;
	height: 30px;
	margin-left: 15px;
}

.projectName {
	font-size: 18px;

	margin-left: 10px;
}

.exmple {
	font-size: 10px;
	margin-left: 30px;
}

.index-swiper {
	padding: 10px;
	background-color: #FBF5EA;
}

.slot-wrap {
	// padding: 15px 10px 10px 10px;
	display: flex;
	color: #fff;
	align-items: center;

	.indexlogo {
		width: 30px;
		height: 30px;
		margin-left: 15px;
	}

	.projectName {
		font-size: 18px;

		margin-left: 10px;
	}

	.exmple {
		font-size: 10px;
		margin-left: 30px;
	}
}
</style>
